/* 背景图片 */
body{
	margin: 0;
	padding: 0;
	background-image: url(../images/bg.jpg);
	/* 背景不平铺 */
	background-repeat: no-repeat;
	/* 背景起始位置 */
	background-position: center;
	/* 图片保持比例放大或缩小使X轴与Y轴都铺满整个容器 */
	background-size: cover;
/* 	animation: bg 3s infinite linear;
	animation-direction: alternate; */
}

.bg {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	position: relative;
}
/* 标题 */
.title h1{
  position: absolute;
  top: 20px;
  left: 39%;
  letter-spacing: 3px;
  color: #BBE0FD;
  /* color: #FF2451; */
  text-shadow: 0 0 10px #0077FE, 0 0 20px #0077FE, 0 0 30px #0077FE, 0 0 40px #0077FE;
}
/* 黑色阴影，鼠标悬浮前，透明度为 0 */
.bg-shadow{
  width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0;
}
/* 黑色阴影，鼠标悬浮前，透明度为 0.9，显示内容 */
.bg-shadow:hover {
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.9;
	visibility: visible;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 1s;
}
/* 表单 */
.form {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	position: absolute;
	height: 400px;
	background-color: rgba(0, 0, 0, .5);
	border-radius: 20px;
	overflow: hidden;
}
/* 流光动画-红光流转 4秒转一圈*/
.form::before {
	content: '';
	width: 500px;
	height: 500px;
	position: absolute;
	/* 锥形渐进 */
	background-image: conic-gradient(transparent, transparent, transparent, #FF2C55);
	animation: form-border 4s infinite linear;
}
/* 流光动画-蓝光流转 延迟两秒执行 */
.form::after {
	content: '';
	width: 500px;
	height: 500px;
	position: absolute;
	background-image: conic-gradient(transparent, transparent,transparent, #1767F5);
	animation: form-border 4s -2s infinite linear;
}

.form .form-div {
	position: absolute;
	inset: 2px;
	background-color: #0C1022;
	z-index: 2;
	border-radius: 16px;
	color: #22FDFE;
	letter-spacing: 10px;
	text-align: center;
	margin: 0 auto;
}
/* 登陆标题 */
.form .form-title h2{
	text-shadow: 0 0 10px #0161FF, 0 0 20px #0161FF;
	animation: form-light 3s infinite linear;
	animation-direction: alternate;
	margin-top: 10px;
}
/* 分割线 */
.form .form-div .hr{
	width: 200px;
	height: 3px;
	position: absolute;
	background-color: #38E9EF;
	left: 15%;
	border-radius: 50%;
}
/* 输入框 */
.form .form-input{
    box-sizing: border-box;
	position: absolute;
	top: 22%;
	margin-left: 15%;
}
.form-input .inputBox{
	width: 200px;
	height: 60px;
	margin-bottom: -10px;
}
.form-input input{
	box-sizing: border-box;
	width: 200px;
	height: 40px;
	background-color: #0C1022;
	/* margin-bottom: 10px; */
	color: #38E9EF;
	border: 2px solid #566074;
	/* ipput 输入时默认轮廓是白色 */
	outline: #38E9EF;
	border-radius: 5px;
	font-size: 18px;
	padding-left: 10px;
}
/* 鼠标悬于时 */
.form-input input:hover{
	border: 2px solid #38E9EF;
}
/* 鼠标点击时 */
.form-input input:visited{
	border: 2px solid #38E9EF;
}
/* 点击后鼠标移开保持鼠标点击时的状态 */
.form-input input:focus{
	border: 2px solid #38E9EF;
}
/* .inputBox:nth-child(2){
	margin-bottom: 20px;
} */
.inputBox .div{
	padding: 2px 10px 3px;
	height: 14px;
	line-height: 0px;
	position: absolute;
	letter-spacing: 0px;
	left: 0;
	margin-top: 10px;
	color: #566074;
	transition: 0.5s;
}
/* 
	当 input 获得焦点时，span 样式改变
	~：input 后面所有的span，他俩必须要有相同的父元素
 */
.inputBox input:valid ~ span,
.inputBox input:focus ~ span{
	background-color: red;
	transform: translateX(4px) translateY(-20px) scale(0.7);
	background-color: #0C1022;
	border: 2px solid #38E9EF;
	color: #38E9EF;
}

/* .inputBox input:valid,
.inputBox input:focus{
	border: 2px solid #38E9EF;
} */
/* 验证码 */
.verifyCodeDiv{
	height: 40px;
	width: 200px;
	position: absolute;
	margin-bottom: 10px;
}
.verifyCodeDiv .verifyCodeImage{
	width: 120px;
	height: 40px;
	/* position: absolute; */
	float: left;
	box-sizing: border-box;
	border: 1px solid #566074;
}
.verifyCodeButton{
	width: 70px;
	height: 40px;
	line-height: 36px;
	box-sizing: border-box;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	letter-spacing: 0px;
	border-radius: 5px;
	border: 1px solid #566074;
	overflow: hidden;
	left: 65%;
	font-weight: 800;
}
.verifyCodeButton::before{
	content: '';
	width: 100px;
	height: 30px;
	position: absolute;
	background-color: #38E9EF;
	animation: form-border 8s infinite linear;
}
.verifyCodeButton .span{
	position: absolute;
	inset: 1px;
	z-index: 2px;
	background: #0C1022;
}
.verifyCodeButton:hover{
	line-height: 38px;
	position: absolute;
	border: 1px solid #38E9EF;
	background: #38E9EF;
	color: #CFDADB;
	box-shadow: 0 0 10px #0077FE,
	0 0 30px #0077FE,
	0 0 60px #0077FE;
	transition: 0.5s;
}
.verifyCodeButton .span:hover{
	position: absolute;
	inset: 0px;
	background: #38E9EF;
	color: #CFDADB;
	box-shadow: 0 0 10px #0077FE,
	0 0 30px #0077FE,
	0 0 60px #0077FE,
	0 0 100px #0077FE;
	transition: 0.5s;
}
.verifyCodeButton:active{
	transform: scale(1.05);
	position: absolute;
	transition: 0s;
}
.verifyCodeButton .span:active{
	transform: scale(1.05);
	position: absolute;
	transition: 0s;
}
.verifyCodeDiv  ~ input{
	margin: 40px;
}
/* 登陆按钮 */
.form-button{
	width: 200px;
	height: 40px;
	position: absolute;
	line-height: 40px;
	border: 2px solid #38E9EF;
	top: 210px;
	font-weight: bolder;
	font-size: 20px;
	border-radius: 10px;
}
.form-button:hover{
	position: absolute;
	background: #38E9EF;
	color: #CFDADB;
	box-shadow: 0 0 10px #0077FE,
	0 0 30px #0077FE,
	0 0 60px #0077FE;
	transition: 0.5s;
}
.form-button:active{
	transform: scale(1.05);
	position: absolute;
	transition: 0s;
}

/* 背景图片的动画 */
@keyframes bg{
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(1.025);
	}
	50% {
		transform: scale(1.050);
	}	
	75%{
		transform: scale(1.075);
	}
	100% {
		transform: scale(1.1);
	}
}
/* 表单流光动画 */
@keyframes form-border {
	0% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(90deg);
	}

	50% {
		transform: rotate(180deg);
	}

	75% {
		transform: rotate(270deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
/* 登陆标题呼吸灯动画 */
@keyframes form-light {
	0% {
		text-shadow: 0 0 10px #0453FC,
		0 0 20px #0453FC,
		0 0 30px #0453FC;
	}

	100% {
		text-shadow: 0 0 30px #0453FC,
		0 0 60px #0453FC,
		0 0 100px #0453FC;
	}
}
/*  */
@-ms-keyframes form-input-border{
	from{
		border: 2px solid #566074;
	}
	to{
		border: 2px solid #38E9EF;
	}
}